<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				
			}
			html{
				height: 100%;
			}
			body{
				height: 100%;
			}
			.container{
				height: 100%;
				width: 100vw;
				height: 100vh;
				background: linear-gradient(45deg,rgb(25,202,173),rgb(140,199,181),rgb(190,237,199),rgb(190,231,233));
				animation:hueRotate  7s infinite alternate;
			}
            @keyframes hueRotate{
            	100%{
            		filter:hue-rotate(360deg);
            	}
            }
            .enter{
            	background-color: white;
            	width: 400px;
            	height: auto;
            	position: sticky;
            	left: 570px;
            	top:200px;
            	border-radius:10px;
            	
            }
           .header{
            	font-size:20px;
            	font-weight: bold;
            	text-align: center;
            	line-height: 200px;
            }
            .in{
            	display: block;
            	width: 95%;
            	margin-bottom: 20px;
            	border: 0;
            	padding: 10px;
            	border-bottom: 3px solid rgb(128,125,125);
            	
            }
            .btn{
            	text-align: center;
            	padding: 10px;
            	background-color:rgb(25,202,173); 
            }
         a{
            	text-decoration: none;
            }
         </style>
	</head>
	<body>
		<div class="container">
			<div class="enter">
				<div class="header">
					学校饭堂外卖平台
				</div>
				<div class="next">
					<input type="text" name="学号" placeholder="学号"class="in">
					<input type="text" name="学号" placeholder="密码"class="in">
					<div class="btn">
					    <a href="http://chen-weipeng55555.gitee.io/final-exam-3">
					    	登录
					    </a>
					</div>
				</div>
				
			</div>
		</div>
	</body>
</html>
